函數

參數與返回值

參數:

• 函數可以接受零個或多個參數

• 參數是在函數定義時指定的變量名

• 實際值在函數調用時傳入

返回值:

• 使用return關鍵字指定函數的返回值

• 如果沒有指定返回值,函數默認返回undefined

• return語句會立即結束函數的執行並返回指定的值

//輸入參數## 

function add(a, b) { 

  return a + b; //返回參數 

} 

函數的創建與調用

函數在js屬於第一類對象(First-class Functions)，他有四個主要的特性

1. 被賦值給變量

// 函數聲明 

function greet(name) { 

    return `Hello, ${name}!`; 

} 

  

// 將函數賦值給變量 

let sayHello = greet; 

  

console.log(sayHello("Alice")); // 輸出: Hello, Alice! 

2. 作為參數傳遞給其他函數

function operate(x, y, operation) { 

    return operation(x, y); 

} 

  

function add(a, b) { 

    return a + b; 

} 

  

function multiply(a, b) { 

    return a * b; 

} 

  

console.log(operate(5, 3, add));      // 輸出: 8 

console.log(operate(5, 3, multiply)); // 輸出: 15 

3. 作為函數的返回值

function createMultiplier(factor) { 

    return function(number) { 

        return number * factor; 

    }; 

} 

  

let double = createMultiplier(2); 

let triple = createMultiplier(3); 

  

console.log(double(5)); // 輸出: 10 

console.log(triple(5)); // 輸出: 15 

4. 被存儲在數據結構中

let mathOperations = { 

    add: (a, b) => a + b, 

    subtract: (a, b) => a - b, 

    multiply: (a, b) => a * b, 

    divide: (a, b) => a / b 

}; 

  

console.log(mathOperations.add(5, 3));      // 輸出: 8 

console.log(mathOperations.multiply(4, 2)); // 輸出: 8 

除此之外，函數還有兩個值得注意的地方：

• 函數聲明後會被提升（hoisted），意味著可以在定義之前調用函數。

• 形成獨立的作用域。

函數表達式

將匿名函數賦值給變量：

let functionName = function(parameter1, parameter2, ...) { 

    // 函數體 

    return result; // 可選 

}; 

特點:

• 不會被提升，必須在定義後才能使用。

• 可以創建匿名函數。

箭頭函數（Arrow Function）

箭頭函數是js在ES6中引入的一種函數語法。它為JavaScript帶來了更簡潔的語法和更直觀的作用域處理，特別適合用於簡短的函數表達式和回調函數。然而，它們並不是傳統函數的完全替代，在選擇使用時需要考慮具體的使用場景和需求。

///原函數 

let functionName = (parameter1, parameter2, ...) => { 

    // 函數體 

    return result; // 可選 

}; 

  

///可以簡寫成這樣 

let functionName = (parameter1, parameter2, ...) => expression; 

例子:

let multiply = (a, b) => a * b; 

  

console.log(multiply(4, 5)); // 輸出：20 

綜上所述，箭頭函數帶來了這些優點:

• 更簡潔的語法，特別是對於簡單的函數。

• 詞法作用域的 this，避免了傳統函數中this綁定的問題。

• 適合用於函數式編程，如 map、reduce、filter 等操作。

注意事項：

• 箭頭函數沒有自己的 this、arguments、super 或 new.target。

• 不能用作構造函數。

• 不適合用作對象方法（除非你明確不需要方法中的 this 指向該對象）。

• 沒有 prototype 屬性。

方法定義

• 在對象字面量中定義函數，白話一點就是在一個變量中直接在中定義一個方法。

let person = { 

    name: "Alice", 

    greet() { 

        console.log(`Hello, my name is ${this.name}`); 

    } 

}; 

person.greet(); // 輸出：Hello, my name is Alice 

在這個例子中，greet就是直接在person對象中定義的方法。

• 除此之外，他還可以在一個對象中定義多個方法。

let calculator = { 

    add(a, b) { 

        return a + b; 

    }, 

    subtract(a, b) { 

        return a - b; 

    }, 

    multiply(a, b) { 

        return a * b; 

    }, 

    divide(a, b) { 

        return a / b; 

    } 

}; 

  

console.log(calculator.add(5, 3));      // 輸出：8 

console.log(calculator.subtract(10, 4)); // 輸出：6 

console.log(calculator.multiply(2, 6)); // 輸出：12 

console.log(calculator.divide(15, 3));  // 輸出：5 

• ES6還允許我們使用計算屬性名來定義方法：

let methodName = "sayHello"; 

  

let greeter = { 

    [methodName]() { 

        console.log("Hello!"); 

    } 

}; 

  

greeter.sayHello(); // 輸出：Hello! 

這就使得我們可以動態地定義方法名。

綜上所述，方法定義帶來了這些優點:

• 簡潔的語法：比傳統的key: function() {}語法更簡潔。

• 自動綁定this：方法中的this自動綁定到對象實例。

• 代碼組織：將相關的方法和數據組織在一起，提高代碼的可讀性和維護性。

• 封裝：可以實現簡單的對象封裝，將數據和行為綑綁在一起。

不過這種方法定義方式與傳統的對象.方法 =function() {}方式在功能上是完全等價的，主要區別在於語法的簡潔性和代碼的組織方式。

發現函數的部分能講的意外的多，故將函數分為上下半部分，將學習計畫向後延一天